This is Chapter 6 of the training program.
If you want to start from the top: Chapter 1, or see Chapter 5 (the previous chapter)
Video 6: Picking Values
To make your experience smooth, we set the main tags mentioned in the video to the right bar menu of this mini-player. Choose an interesting subtitle on the list and immediately get to the exact theme navigation item place in the video. Now you can pick any topic to be instructed on without watching the whole video.
Chapter 6: Modal Dialog to Pick Values and Return to Caller to Use Picked Values
NOTE: Click on the step/number to access the corresponding images.
183. The Person ViewModel - the button CarsIUsedToOwn - does not do anything and can be removed, but let me explain where it came from.
When we adopted the AutoPersonForm and named it Person, it worked at first, since it pointed to the AutoFormPersonCarsIUsedToOwnMultiLink, which shows the content of CarsIUsedToOwnMultiLink. We have regenerated the AutoForms since then so this action lost its form and a new form was created that the previous action is not connected to.
Remove the button and remove the ViewModel action MultiLinkCarsIUsedToOwn.
184. Add a ViewModelColumn and mark it as Is Action. See that it turns into a button.
185. Name it AddACarIUsedToOwn.
186. Create a ViewModelAction. Name it AddACarIUsedToOwnAction.
187. Hook up the button AddACarIUsedToOwn to the action AddACarIUsedToOwnAction by selecting it in the picker next to the Is Action checkbox.
188. Press the NewEditor button at the top of the ViewModelEditor. In the new window, find the AutoFormCarSeeker.
189. Adopt the AutoFormCarSeeker to make it your own and name it CarSeeker.
190. Back to the AddACarIUsedToOwnAction, set BringUpViewModel to CarSeeker. Save. Test the web.
191. When we are on the web and we try to add a new car I have owned, we see that the Seeker for cars comes up, but we want to show it on top of the Person form.
192. Go back to the AddACarIUsedToOwnAction, find the check box Is Modal, check it, and save. Test the web.
193. A modal dialog OK button has an enable expression. This must be made true for the User to press ok. Set it to true (by typing the OCL constant "true" in the box). Save and test the web.
194. We really want to enable the user to Search and select cars prior to returning.
- Open the enableExpressionForModelOk OCL editor on the three dots.
- Find
vSeekerResult->notemptyin the expression helper tree and make that the expression. - Save and test the web.
195. The OK button is only enabled if there is a row selected in the search result - does this work for you?
- Try to search for cars, select first, then search for some nonsense (like "AAAAAAA"). You'll get an empty search result - not OK.
196. The AddACarIUsedToOwn Action also has an Action expression: ActionAfterModalOk. This is where we can act on the user's wishes once the user presses OK. It will not be performed on the Cancel/close box in the modal.
197. Go into the OCL editor for ActionAfterModalOk on the AddACarIUsedToOwnAction and type in the expression: vCurrent_Person.CarsIUsedToOwn.Add(vModalResult_vCurrent_Car).
- If you manage to find the words in the tree, you will see that the tree updates to reduce the options one at a time to what fits best.
198. vCurrent_Person is the root of the view we are in. It is an object of the class Person.
vCurrent_Person.CarsIUsedToOwnis that person's CarsIUsedToOwn.vCurrent_Person.CarsIUsedToOwn.Add(argument) is a list operation to add a reference to an association.vModalResult_vCurrent_Caris the Car object that the user chose in the Modal CarSeeker.
Make sure your expression is vCurrent_Person.CarsIUsedToOwn.Add(vModalResult_vCurrent_Car) . Save. Test the web.
199. Operations can be canceled or saved. Unsaved things can also be undone and re-done in multiple steps by the user. Try it out.
200. Bring up another browser form. Navigate to PersonSeeker. We are going to quickly fix a problem I see with the PersonSeeker: when you seek with a blank input, you get nothing when you should probably get all.
201. Open up ViewModel PersonSeeker, add another Search Expression, and change the Criteria.
- Set it to
Person.allinstances. - Change its Active expression to
vSeekParam->isnullorempty. - This Criteria will kick in only when the search box is blank. Save and test the web.
202. Bring up the person SomeOtherDude in the browser window 2. What happens when he picks a CarIUsedToOwn that your browser window 1 person already picked?
203. We want it to be possible to have multiple previous owners. Change the cardinality from 0..1 to 0..* on PreviousOwner.
204. Save and see errors. Many are from AutoForms, so Refresh AutoForms and save.
205. Now repeat step 202. How does it work now?
206. Make it possible to take multiple cars at a time using vSelected: vModalResult_vSelected_Car->collect(pc| vCurrent_Person.CarsIUsedToOwn.Add(pc))
207. While working with many-to-many relationships, it is very common to want an association class.
- Create a new class in the diagram.
- Call it HistoricOwnership.
208. Click the association-class-connection-tool. Select the HistoricOwnership class, drag, and hold. Let the mouse go over the many-to-many relation between person and car. You should get a dotted line.
209. Add an attribute, DateSold of type DateTime?, to the class HistoricOwnership.
210. Set the innerlink names to Car for navigation to Car and Person for navigation to Person.
211. In the ViewModel Person, we add another grid table that shows the link objects.
- Add nested ViewModelClass multilinks.
- Find HistoricOwnership.
212. Test on the web. Verify that the two lists are maintained automatically.
213. Remove the CarIUsedToOwn grid, since the other link-class grid has the same and more information.
- This is almost always the case. If you have an association class, you want to show that instead of the end objects.
- This is due to the increased precision that the link-object has, pointing out the exact pair of associated objects.
214. On the nesting HistoricOwnership, set the "Act As For Actions" to self.Car. Save.